<template>
    <el-card class="box-card" :style="`height:${height}`">
        <div slot="header">
            <span class="label">{{label}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">更多</el-button>
        </div>
        <div v-for="o in list" :key="o.id" class="text item" >
            <el-col :span="18" class="title" >
                <span @click="goDetail(o)">{{o.title}}</span>
            </el-col>
            <el-col :span="6">
                {{o.createTime}}
            </el-col>
        </div>
    </el-card>
</template>

<script>
    import  Api from '@/api/article'
    export default {
        props: {
            label: {default: '经典文章'},
            id: {default: ''},
            height: {String,default: '200px'}
        },
        components: {},
        data() {
            return {
                list: [
                    {
                        id: 1,
                    title: '1234',
                    createTime: '2020-10-21'
                },
                    {
                        id:2,
                        title: 'wwwwwwrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrwwwwwwrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrwwwwwwrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrwwwwwwrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrrr',
                        createTime: '2020-10-21'
                    },
                    {
                        id:3,
                        title: 'fgggsfdgf',
                        createTime: '2020-10-21'
                    }
                ]
            }
        },
        mounted() {
        },
        methods: {
            // 跳转文章详情页
            goDetail(article) {
                this.$router.push({
                    path: `/detail/${article.id
                    }`,
                })

            },
            getList() {
                Api.list().then(res => {
                    this.list = res.data
                })
            }
        },

    };
</script>

<style lang="scss" >
    .box-card {
        .label {
            font-size: 13px;
            font-weight: bold;
        }
        .item {
            border-bottom: 1px solid #bbbbbb;
            height: 30px;
            line-height: 30px;
            &>.title:hover {
                cursor: pointer;
                font-weight: bold;
                color: #00b7ee;
            }
        }
        .title {
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .el-card__header {
            padding: 0 20px 3px 20px;
            height: 22px;
        }
        .el-card__body {
            padding: 0 10px;
        }

    }
</style>